<template>
  <section class="cms-page">
    <h2 class="cms-title">{{edit_type}}服务</h2>
    <el-form
      v-loading="loading"
      class="cms-form"
      ref="form"
      :model="form" label-width="80px">
      <el-form-item
        label="服务类型："
        prop="name"
        :rules="[{required: true, message: '请输入服务类型名称' }]"
      >
        <el-input v-model="form.name" placeholder="请输入服务类型名称"></el-input>
      </el-form-item>
      <el-form-item
        label="描述："
        prop="des"
        :rules="[{required: true, message: '请输入服务描述' }]"
      >
        <el-input v-model="form.des" placeholder="请输入服务描述"></el-input>
      </el-form-item>
      <el-form-item
        label="价格："
        prop="price"
        :rules="[{required: true, message: '请输入价格' }]"
      >
        <el-input type="number" v-model="form.price" placeholder="请输入价格"></el-input>
      </el-form-item>
      <el-form-item
        label="logo："
        prop="header_url"
        :rules="[{required: true, message:'请上传logo'}]"
      >
        <el-upload
          action="/api/v1/image"
          :on-remove="handleRemove"
          :http-request="handleUpload"
          :file-list="img_list"
          list-type="picture">
          <el-button
            :loading="upload_loading"
            size="small"
            type="primary">点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label=" "
      >
        <el-button
          @click="ensure"
          :disabled="disabled"
          :loading="submit_loading"
          type="primary">确定</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-15
   * @Project: eabax
   */
  export default {
    name: 'edit-service',
    data() {
      return {
        loading: false,
        upload_loading: false,
        submit_loading: false,
        form: {
          name: '',
          des: '',
          logo: '',
          c_id: '',
          price: ''
        },
        img_list: []
      }
    },
    computed: {
      edit_type() {
        let query = this.$route.query
        return query.sId ? '编辑' : '新增'
      },
      disabled(){
        let form = this.form,
          disabled = false,
          query = this.$route.query
        Object.keys(form).forEach(key => {
          if(key === 'logo' && query.sId){
            return
          }
          if(form[key] === ''){
            disabled = true
          }
        })
        return disabled
      }
    },
    watch: {
      $route: {
        deep: true,
        handler() {
          this.init()
        }
      }
    },
    mounted(){
      let query = this.$route.query
      this.form.c_id = query.cId
      this.init()
    },
    methods: {
      init() {
        let query = this.$route.query
        if(!query.cId){
          this.$router.replace({
            path: '/cms/home'
          })
          return
        }
        if (query.sId) {
          this.form.id = query.sId
          this.form.name = query.name
          this.form.des = query.des
          this.form.price = query.price
          this.img_list = [{
            name: 'logo.jpg',
            url: query.logo
          }]
        }
      },
      handleRemove() {
        this.img_list = []
      },
      async handleUpload(file_item) {
        let base64 = await this.$fn.getBase64(file_item.file)
        this.upload_loading = true
        this.$axios.$post('/api/v1/image', {
          img: this.$fn.extractBase64(base64)
        })
          .then(res => {
            this.upload_loading = false
            this.form.logo = res.id
            this.img_list = [{
              name: 'logo.jpg',
              url: base64
            }]
            this.$message({
              message: '上传成功',
              type: 'success'
            })
          }, err => {
            this.upload_loading = false
            this.$message({
              message: '上传失败',
              type: 'error'
            })
          })
      },
      ensure(){
        let form = this.form,
          disabled = this.disabled,
          edit_type = this.edit_type,
          url = '/api/v1/service'
        if(disabled) return
        if(form.id) {
          url = '/api/v1/service/update'
          if(form.logo === '') {
            delete form.logo
          }
        }
        this.submit_loading = true
        this.$axios
          .$post(url, form)
          .then(res => {
            this.submit_loading = false
            this.$message({
              message: edit_type + '成功',
              type: 'success'
            })
            this.$router.push({
              path: '/cms/home'
            })
          })
          .catch(res => {
            this.$message({
              message: edit_type + '失败',
              type: 'error'
            })
            this.submit_loading = false
          })
      }
    },
    layout: 'cms'
  }
</script>